<template>
  <div class="home">
    <!-- <v-carousel
      class="carousel"
      cycle
      height="56.25vw"
      :interval="10000"
      hide-delimiters
      :show-arrows="false"
    >
      <v-carousel-item v-for="item in bannerList" :key="item.id" eager :src="item.image" />
    </v-carousel> -->
    <SearchCar :brand-list="brandList" @change="handleBranchListChange" />
    <StoreList :store-list="storeList" @change="handleStoreChange" />
    <SelectTime
      :start-time="start_time"
      :end-time="end_time"
      :business-time="businessTime"
      @search="handleSelectTimeSearch"
    />
    <CarList :list="carList" />
    <!-- <client-only>
      <Pagination
        :page-number="pageNumber"
        :page-size="pageSize"
        :total="total"
        :loading="loading"
        @change="onPaginationChange"
      />
    </client-only> -->
    <UserGuide />
  </div>
</template>

<script>
import pageLoadingMixin from '~/plugins/pageLoadingMixin';

export default {
  mixins: [pageLoadingMixin],
  data() {
    return {
      storeList: [],
      bannerList: [],
      carList: [],
      brandList: [],
      brand_id: '',
      storeId: '',
      start_time: '',
      end_time: '',
      businessTime: {},
      pageNumber: 1,
      pageSize: 999,
      total: 0,
      loading: false
    };
  },
  async fetch() {
    await Promise.allSettled([
      this.getStoreList(),
      this.getCarList(),
      // this.getBannerList(),
      this.getBrandAndCategory(),
      this.getBusinessTime()
    ]);
  },
  head() {
    return {
      link: [
        // ...(this.bannerList[0]
        //   ? [
        //       {
        //         rel: 'preload',
        //         as: 'image',
        //         href: this.bannerList[0].image
        //       }
        //     ]
        //   : []),
        ...this.brandList.map((item) => ({
          rel: 'preload',
          as: 'image',
          href: item.brand_logo
        }))
      ]
    };
  },
  // fetchOnServer: false,
  methods: {
    async getStoreList() {
      const res = await this.$api.post('/stores/getStoreListByLongLat', {});
      this.storeList = res;
    },
    async getBannerList() {
      const res = await this.$api.post('/home/getBannerList', {});
      this.bannerList = res;
    },
    async getCarList(isMobile = false) {
      const parmas = {
        search_str: '',
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        brand_id: this.brand_id,
        storeId: this.storeId,
        start_time: this.start_time ? this.start_time + ':00' : '',
        end_time: this.end_time ? this.end_time + ':00' : ''
      };
      this.loading = true;
      try {
        const res = await this.$api.post('/product/searchList', parmas);
        if (isMobile) {
          this.carList = this.carList.concat(res.list);
        } else {
          this.carList = res.list;
        }
        this.total = res.total;
        this.loading = false;
      } catch (e) {
        this.loading = false;
      }
    },
    async getBrandAndCategory() {
      const res = await this.$api.post('/home/getBrandAndCategory', {});
      this.brandList = res.brandList.splice(0, 8);
    },
    async getBusinessTime() {
      const res = await this.$api.post('stores/getBusinessTime', {
        storeIds: this.storeId
      });
      this.businessTime = res || {};
    },
    handleBranchListChange(val) {
      this.brand_id = val.join(',');
      this.pageNumber = 1;
      this.getCarList();
    },
    handleStoreChange(val) {
      this.storeId = val?.id;
      this.pageNumber = 1;
      this.getCarList();
      this.getBusinessTime();
    },
    handleSelectTimeSearch(start_time, end_time) {
      this.start_time = start_time;
      this.end_time = end_time;
      this.pageNumber = 1;
      this.getCarList();
    },
    onPaginationChange(pageNumber, isMobile) {
      this.pageNumber = pageNumber;
      this.getCarList(isMobile);
    }
  }
};
</script>
<style scoped lang="scss">
.carousel-contain {
  position: relative;
}

.carousel {
  background-color: #ececec;
  max-height: 675px;
  ::v-deep(.v-window__container) {
    max-height: 675px;
    .v-carousel__item {
      max-height: 675px;
    }
  }
}

.home {
  position: relative;

  .datepicker-pc {
    position: absolute;
    top: 380px;
    left: 5vw;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0.9;
  }
}
</style>
<style lang="scss">
.datepicker {
  height: 18vw;
  min-height: 210px;
  max-height: 380px;
  max-width: 380px;

  .v-picker__body {
    height: 18vw;
    min-height: 210px;
    max-height: 380px;
    max-width: 380px;
  }

  .v-picker__title {
    display: none;
  }

  .v-date-picker-header {
    display: none;
  }

  .theme--light.v-btn:focus::before {
    display: none;
  }

  .theme--light.v-btn:hover:before {
    display: none;
  }

  .green--text {
    background: #caece0;
    border-radius: 8px;
    border-color: transparent;
  }

  .v-btn--disabled {
    background: #f1f1f1;
    border-radius: 8px;
    border-color: transparent;
  }

  .v-date-picker-table__events {
    bottom: -14px !important;
  }

  .v-date-picker-table__events > div {
    width: 4px;
    height: 4px;
  }

  div {
    height: 100%;
  }

  table {
    height: 100%;
  }
}

.v-image__image--cover {
  background-position: 50% 70% !important;
}
</style>
